<template>
    <div class="id_c">
        <van-field  v-model="id_code" name="id_code" label="" placeholder="验证码"
          :rules="[{ required: false, message: '请填写验证码' }]" />

        <div class="id_pic">
          <img :src="code">
          <div @click="id_codeAction" > <button>看不清</button><button>换一张</button></div>   
      </div>
      </div>
</template>

<script>
  
    export default {
      name:"Id_code",
        data(){
            return{
                id_code: '',
                status: 1,
                code: "base64",
            }
        },
        created() {
      this.axios.post("https://elm.cangdu.org/v1/captchas").then((res) => {
        console.log(res);
        this.code = res.data.code;
            this.status = res.data.status;
      }).catch((err) => {
        console.log(err);
      })
    },
    methods:{
      id_codeAction(){
        const requeststatus = this.axios.post("https://elm.cangdu.org/v1/captchas");
        this.axios.all([requeststatus]).then(this.axios.spread((res1) => {
            console.log(res1);
            this.code = res1.data.code;
            this.status = res1.data.status;
            })).catch((err) => {
                console.log(err);
            });
      }
    }
}
</script>

<style scoped lang="less">
   .van-field{
    padding: 0.4rem 0.5rem;
    background-color: white;
    border-bottom: 1px solid #f1f1f1;
    font-size: 0.45rem;
  }
    img{
    overflow:hidden;
    width: 3rem;
  }
  .id_pic>div{
    margin-left:0.3rem;
  }
  button{
    font-size: 0.33rem;
    border: 0px;
    background-color: unset;
    padding: 0.08rem 0rem;
    margin-right: 0.2rem;
  }
  .id_c{
    width: 100%;
    background-color: white;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }
  .id_pic{
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }
</style>